<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/angular.js"></script>
    <script src="../lib/angular-route.js"></script>
    <script type="text/javascript">
        angular.module('app', ['ngRoute'])
                .provider('myProvider', function () {
                    var baseUrl = 'https://itunes.apple.com/search?term=';
                    var _artist = '';
                    var _finalUrl = '';
                    var makeUrl = function () {
                        _artist = _artist.split('.').join('+');
                        _finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK';
                        return _finalUrl;
                    };
                    this.thingFromConfig = '';
                    this.$get = function ($http, $q) {
                        return {
                            setArtist: function (artist) {
                                _artist = artist;
                            },
                            getArtist: function () {
                                return _artist;
                            },
                            callItunes: function () {
                                makeUrl();
                                console.log(_finalUrl);
                                var deferred = $q.defer();
                                $http({
                                    method: 'JSONP',
                                    url: _finalUrl
                                }).success(function (data) {
                                    return deferred.resolve(data);
                                }).error(function () {
                                    deferred.reject('There was an error.');
                                });
                                return deferred.promise;
                            },
                            thingOnConfig:this.thingFromConfig
                        };
                    }
                })
                .controller('myProviderCtrl', ['$scope', 'myProvider', function ($scope, myProvider) {
                    $scope.data = {};
                    $scope.updateArtist = function () {
                        myProvider.setArtist($scope.data.artist);
                    };
                    $scope.thingOnConfig=myProvider.thingOnConfig;

                    $scope.submitArtist = function () {
                        $scope.updateArtist();
                        myProvider.callItunes().then(function (data) {
                                    $scope.data.artistData = data;
                                },
                                function (data) {
                                    console.log(data);
                                    alert(data);
                                });
                    };
                }]).config(function (myProviderProvider) {
                    myProviderProvider.thingFromConfig = 'This sentence was set...';
                });
    </script>
</head>
<body ng-app="app">
<div ng-controller="myProviderCtrl">
    <div><h1>{{thingOnConfig}}</h1></div>
    <div>
        <input type="text" ng-model="data.artist"/>
        <button type="button" ng-click="submitArtist()">refresh</button>
    </div>
    <ul>
        <li ng-repeat="artist in data.artistData.results">
            <img ng-src="{{artist.artworkUrl100}}"/>

            <div>
                <p>{{artist.artistName}}</p>

                <p>{{artist.collectionName}}</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>